<script setup lang="ts">
import { ref } from 'vue'

// 1. 定义属性接收父组件传值
defineProps<{
  orderId: string
  amount: number
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'confirm', index: number): void
}>()

const paymentPopup = ref()

const open = () => {
  paymentPopup.value.open()
}
const close = () => {
  paymentPopup.value.close()
}

// 3. 处理选择支付渠道
const paymentMethod = ref()
// 支付渠道（方式）
const paymentChannel = [
  { title: '微信支付', thumb: '/static/images/wechatpay-icon.png' },
  { title: '支付宝支付', thumb: '/static/images/alipay-icon.png' },
]

const changePayment = (index: number) => {
  paymentMethod.value = index
}

// 2. 把方法暴露出去给外部使用
defineExpose({ open, close })
</script>

<template>
  <uni-popup :is-mask-click="false" ref="paymentPopup" type="bottom" @maskClick="emit('close')">
    <view class="payment-container">
      <view class="payment-header">
        <text class="title">选择支付方式</text>
        <uni-icons
          class="uni-icons-close"
          size="18"
          color="#333"
          type="closeempty"
          @click="emit('close')"
        />
      </view>
      <view class="order-amount">¥ {{ amount.toFixed(2) }} </view>
      <uni-list :border="false">
        <uni-list-item
          clickable
          v-for="(item, index) in paymentChannel"
          :key="index"
          :title="item.title"
          :thumb="item.thumb"
          @click="changePayment(index)"
        >
          <template #footer>
            <uni-icons
              v-if="paymentMethod === index"
              size="26"
              color="#16C2A3"
              type="checkbox-filled"
            />
            <uni-icons v-else size="26" color="#d1d1d1" type="circle" />
          </template>
        </uni-list-item>
      </uni-list>
      <button class="uni-button" @click="emit('confirm', paymentMethod)">立即支付</button>
    </view>
  </uni-popup>
</template>

<style scoped  lang="scss">
.payment-container {
  min-height: 400rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  padding: 10rpx 30rpx 40rpx;

  .payment-header {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
    position: relative;
  }

  .uni-icons-close {
    position: absolute;
    top: 2rpx;
    right: 0;
  }

  .order-amount {
    padding: 10rpx 0 10rpx;
    text-align: center;
    font-size: 40rpx;
    color: #333;
  }

  :deep(.uni-list-item__container) {
    padding: 40rpx 0 !important;
  }

  :deep(.uni-list-item--hover) {
    background-color: #fff !important;
  }

  :deep(.uni-list-item__icon) {
    margin-right: 0;
  }

  .uni-button {
    margin-top: 40rpx;
  }
}
</style>